<template>
  <div class="top_wrapper" style="width: 100%;background-color: #545c64;height: 50px;">
    <ChangeUserInfo  v-on:dialogFormVisible="dialogFormVisibleChange" :dialog-form-visible="dialogFormVisible"></ChangeUserInfo>
    <div class="top_inner" style="display: flex;padding-left: 20px;">
      <div class="left_text" style="font-size: 25px;font-weight: bold;color: #ffd04b;line-height: 50px;">
        ★&nbsp特征英语
      </div>
      <div class="myinfo_wrapper" style="margin: 0 0 0 400px;border: 0px solid blue;">
        <div class="myinfo_inner" style="display: flex;">
          <div class="avatar" style="width: 35px;height: 35px;background: url('../assets/logo.png');
          margin:7px auto;border: 0px solid white;border-radius: 50%;">
              <el-avatar icon="el-icon-user-solid"></el-avatar>
<!--            <img :src="require('i:/img/avatar')" alt="" style="width: 100%;height: 100%;border-radius: 50%;">-->
          </div>
          <div class="username" style="line-height: 45px;margin-left: 10px;color: #ffd04b;">
            {{userinfo.username}}
          </div>
          <div class="reset_info_btn" style="line-height: 45px;margin-left: 20px;color: #ffd04b;" @click="dialogFormVisible=true">
            修改信息
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex';
  import ChangeUserInfo from "./ChangeUserInfo";
  import {img_path} from "../utils/StringUtils";
  export default {
      name: "Top",
      // props: ['userinfo'],
      data(){
        return {
          // avatar: require("i:/img/avatar.jpg"),
          dialogFormVisible: false,
          img_path: img_path
        }
      },
      components: {
        ChangeUserInfo
      },
      methods: {
        dialogFormVisibleChange(value){
          console.debug("avatar_test:"+this.avatar_test)
          console.debug("监听到dialogFormVisible"+value)
          this.dialogFormVisible = value
        },
      },
      computed: {
        ...mapState(['userinfo']),
        ...mapGetters({asd:'inc_inc'})
      },
    }
</script>

<style scoped>

</style>
